:root{
  --bg1:#FFF6EA; --fg:#1a1a1a; --muted:#5b5b5b; --line:#e9e9e9;
  --brand1:#FF7A00; --brand2:#FFD500; --brand3:#37D679; --brand4:#11A8FF;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;color:var(--fg);
  background: linear-gradient(130deg, var(--brand1) 0%, var(--brand2) 30%, var(--brand3) 65%, var(--brand4) 100%);
  background-attachment: fixed;
}
.container{max-width:1100px;margin:0 auto;padding:0 20px}
.site-header{position:sticky;top:0;backdrop-filter:saturate(180%) blur(10px); background:rgba(255,255,255,0.88); border-bottom:1px solid var(--line); z-index:10;}
.bar{display:flex;align-items:center;gap:16px;padding:12px 0}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--fg);font-weight:800}
.brand img{height:46px;width:auto;border-radius:10px}
nav{margin-left:auto;display:flex;gap:10px;flex-wrap:wrap}
nav a{color:var(--fg);text-decoration:none;padding:8px 12px;border-radius:10px}
nav a.active, nav a:hover{background:rgba(255,255,255,.9); box-shadow:0 1px 0 rgba(0,0,0,.03)}
h1{font-size:clamp(28px,4vw,40px);margin:26px 0 10px}
h2{font-size:clamp(22px,3vw,28px);margin:24px 0 12px}
.lead{color:#2b2b2b;margin:0 0 18px}
.section{padding:22px 0}
.hero{display:grid;grid-template-columns:1.1fr 1fr; gap:16px; align-items:center}
.hero img{max-width:60%;height:auto;display:block;margin:0 auto;border-radius:20px;box-shadow:0 10px 24px rgba(255,122,0,.25), 0 4px 14px rgba(255,213,0,.25);}
.cta{display:inline-block;padding:12px 18px;border-radius:14px;
  background:linear-gradient(90deg,var(--brand1),var(--brand3),var(--brand4));
  color:white;text-decoration:none;font-weight:800;box-shadow:0 6px 18px rgba(0,0,0,.12)}
.cta.secondary{background:rgba(255,255,255,.85); color:#111; box-shadow:none}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px}
.card{background:rgba(255,255,255,.9);border:1px solid rgba(255,255,255,.35);backdrop-filter:blur(6px);border-radius:16px;padding:18px;box-shadow:0 8px 20px rgba(0,0,0,.06)}
.card .more{display:inline-block;margin-top:10px;font-weight:700;text-decoration:none}
footer{border-top:1px solid rgba(255,255,255,.5);padding:24px 0;color:#1a1a1a;font-weight:600}
form.card label{display:block;margin:14px 0 6px;font-weight:600}
input,select,textarea{width:100%;padding:12px 12px;border:1px solid var(--line);border-radius:12px;background:#fff}
button, .button{padding:12px 18px;border:0;border-radius:14px;background:linear-gradient(90deg,var(--brand1),var(--brand3),var(--brand4));color:#fff;font-weight:800;cursor:pointer}
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.ph{aspect-ratio:4/3;border-radius:12px;background:rgba(255,255,255,.7);display:flex;align-items:center;justify-content:center;color:#666;border:1px dashed #ddd}
@media (max-width:820px){.hero{grid-template-columns:1fr}.hero img{max-width:48%}}.hero img{max-width:60%;height:auto;display:block;margin:0 auto;border-radius:20px;box-shadow:0 10px 24px rgba(255,122,0,.25), 0 4px 14px rgba(255,213,0,.25);}}.hero img{max-width:60%;height:auto;display:block;margin:0 auto;border-radius:20px;box-shadow:0 10px 24px rgba(255,122,0,.25), 0 4px 14px rgba(255,213,0,.25);}}.hero img{max-width:60%;height:auto;display:block;margin:0 auto;border-radius:20px;box-shadow:0 10px 24px rgba(255,122,0,.25), 0 4px 14px rgba(255,213,0,.25);}}}


/* Lightbox */
.lightbox-overlay{position:fixed;inset:0;background:rgba(0,0,0,.85);display:none;align-items:center;justify-content:center;z-index:9999;}
.lightbox-overlay.open{display:flex;}
.lightbox-overlay img{max-width:92vw;max-height:88vh;box-shadow:0 10px 30px rgba(0,0,0,.6);border-radius:12px;background:#fff}
.lightbox-close{position:fixed;top:14px;right:18px;background:#fff;border-radius:10px;padding:8px 12px;cursor:pointer;font-weight:800;border:none}
.gallery a{display:block;border-radius:12px;overflow:hidden;border:1px solid rgba(255,255,255,.6);background:rgba(255,255,255,.7)}
.gallery img{width:100%;height:auto;display:block}

.gallery a{cursor:zoom-in}
.lightbox-overlay{transition:opacity .18s ease}
.lightbox-overlay:not(.open){opacity:0;pointer-events:none}

.lightbox-overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.88);z-index:9999}
.lightbox-overlay img{max-width:92vw;max-height:88vh;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.6);background:#fff}
.lightbox-close,.lightbox-prev,.lightbox-next{position:fixed;background:#fff;border:none;border-radius:10px;padding:10px 12px;font-weight:800;cursor:pointer;box-shadow:0 6px 18px rgba(0,0,0,.2)}
.lightbox-close{top:14px;right:18px}
.lightbox-prev{left:18px;top:50%;transform:translateY(-50%)}
.lightbox-next{right:18px;top:50%;transform:translateY(-50%)}



.hero img{max-width:60%;height:auto;display:block;margin:0 auto;border-radius:20px;box-shadow:0 10px 24px rgba(255,122,0,.25), 0 4px 14px rgba(255,213,0,.25);}


/* Lightbox visibility + arrows on top */
.lightbox-overlay{position:fixed;inset:0;background:rgba(0,0,0,.88);display:none;align-items:center;justify-content:center;z-index:9999}
.lightbox-overlay.open{display:flex}
.lightbox-overlay img{max-width:92vw;max-height:88vh;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.6);background:#fff}
.lightbox-close,.lightbox-prev,.lightbox-next{
  position:fixed;background:#fff;border:none;border-radius:10px;padding:10px 14px;font-weight:800;cursor:pointer;
  box-shadow:0 6px 18px rgba(0,0,0,.25);z-index:10001
}
.lightbox-close{top:14px;right:18px}
.lightbox-prev{left:18px;top:50%;transform:translateY(-50%)}
.lightbox-next{right:18px;top:50%;transform:translateY(-50%)}
.gallery a{cursor:zoom-in; display:block; border-radius:12px; overflow:hidden}


/* Simple Lightbox (click to open, click/ESC to close) */
.lightbox-overlay{position:fixed;inset:0;background:rgba(0,0,0,.88);display:none;align-items:center;justify-content:center;z-index:9999}
.lightbox-overlay.open{display:flex}
.lightbox-overlay img{max-width:92vw;max-height:88vh;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.6);background:#fff}
.gallery a{cursor:zoom-in; display:block; border-radius:12px; overflow:hidden}


/* --- Readability tuning for content --- */
.card p, .card li{
  font-size: 18px;
  line-height: 1.7;
}
.card ul{ padding-left: 1.2rem; }


/* === Mobile/Responsive Enhancements (appended 2025-10-19) === */

/* Container padding tweaks for small screens */
@media (max-width: 900px){
  .container{ padding-left:16px; padding-right:16px; }
}

/* Header: allow wrapping and nicer spacing */
@media (max-width: 900px){
  .site-header .bar{ flex-wrap: wrap; gap: 10px; align-items: flex-start; }
  .brand img{ height: 40px; }
  .brand span{ font-size: 16px; line-height: 1.2; }
  nav{ width: 100%; margin-left: 0; flex-wrap: wrap; gap: 8px; }
  nav a{ padding: 10px 12px; border-radius: 8px; display: inline-block; }
}

/* Typography scaling */
@media (max-width: 900px){
  h1{ font-size: clamp(28px, 5vw, 36px); }
  h2{ font-size: clamp(22px, 4.2vw, 28px); }
  h3{ font-size: clamp(18px, 3.8vw, 22px); }
  p, li{ font-size: 16px; line-height: 1.6; }
}

/* Generic grid responsiveness */
@media (max-width: 1000px){
  .grid{ grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
}
@media (max-width: 640px){
  .grid{ grid-template-columns: 1fr !important; }
}

/* Cards spacing on small screens */
@media (max-width: 640px){
  .card{ padding: 16px; border-radius: 12px; }
}

/* Hero/CTA stacks */
@media (max-width: 900px){
  .hero{ grid-template-columns: 1fr !important; gap: 16px; }
  .hero .cta{ display: grid; grid-template-columns: 1fr; gap: 10px; }
}

/* Images and galleries */
@media (max-width: 900px){
  img{ height: auto; max-width: 100%; }
  .gallery{ grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap: 10px; }
}
@media (max-width: 560px){
  .gallery{ grid-template-columns: 1fr !important; }
}

/* Tables: make scrollable horizontally */
.table-responsive{ width:100%; overflow-x:auto; }
.table-responsive table{ min-width: 600px; }

/* Forms: full width inputs/buttons on mobile */
@media (max-width: 640px){
  input[type="text"], input[type="email"], select, textarea, button{
    width: 100%;
  }
}

/* Footer adjustments */
@media (max-width: 900px){
  footer .container{ text-align: center; }
}